<template>
  <div class="todoapp">
    <!-- 如果组件名用的是驼峰，在html中可以拆掉驼峰变成- -->
    <!-- 也能继续用驼峰，两种方式都可以 -->
    <todo-header @addTodo="add" :list="list"/>

    <!-- 这时候就不要传递全部数组 -->
    <!-- 而是传递过滤后的数组 -->
    <todoMain :list="filterList" @doDel="del" />

    <!-- $event对于组件而言就是传递过来的数据 -->
    <todo-footer
      :list="filterList"
      @changeStatus="status = $event"
      @clear="clear"
    />
  </div>
</template>

<script>
// 导入三大部分组件作为子组件
import todoHeader from "./components/TodoHeader.vue";
import todoMain from "./components/TodoMain.vue";
import todoFooter from "./components/TodoFooter.vue";

export default {
  // 注册组件
  components: {
    todoHeader,
    todoMain,
    todoFooter,
  },

  data() {
    return {
      // 用来记录footer里选中状态的变量
      status: "全部",
      list: JSON.parse(localStorage.getItem('todos80')) || [],
    };
  },

  methods: {
    // 添加
    add(v) {
      // 参数就是子组件传递过来的数据了

      // 先拿到最后一条数据的id，然后让最后个id来+1即可
      // 最后一个数据一定是长度-1的元素

      // 如果删完了，数组就是空数组，长度为0
      // 所以如果你再用长度-1取下标取的是-1的下标，那么会取到undefined
      // 对undefined调用id属性要报错的
      // let lastId = this.list[this.list.length - 1].id

      // 如果取最后数组中最后一个数据，取到了，那我就用id+1
      // 如果没取到，代表数组是空，那就写死id为100(相当于就是让id又从100开始)
      let last = this.list[this.list.length - 1];
      // 加到数组里
      this.list.push({
        id: last ? last.id + 1 : 100,
        name: v,
        // 因为是新添加的任务，所以直接给false,代表还未完成
        isDone: false,
      });
    },

    del(id) {
      // 如何通过id删除数组里的元素？？
      // 删除元素还是要通过下标删除
      // 但目前只有id，所以要先通过id找到下标
      // 然后再根据下标删除
      // v就是每个元素
      let idx = this.list.findIndex((v) => v.id == id);
      this.list.splice(idx, 1);
    },

    // 清除已完成
    clear() {
      // 把所有的已完成数据删掉
      // 换句话说就是 过滤出 未完成的数据 组成新数组
      // 相当于把list的所有已完成数据就删掉了
      this.list = this.list.filter((v) => !v.isDone);
    },
  },

  // 计算属性
  computed: {
    // 根据状态过滤出一个数组
    filterList() {
      if (this.status == "未完成") {
        // 返回一个未完成的数组(isDone为false)
        return this.list.filter((v) => !v.isDone);
      } else if (this.status == "已完成") {
        // 返回一个已完成的数组
        return this.list.filter((v) => v.isDone);
      }

      // 返回一个全部数据的数组
      return this.list;
    },
  },

  watch: {

    // 侦听list数组的
    list: {
      // 开启深度侦听后，就可以侦听到对象里属性的变化
      deep: true,
      handler () {

        // 把数组保存到本地存储
        localStorage.setItem('todos80', JSON.stringify(this.list) )
      }
    }
  }
};
</script>

<style>
</style>